const app = Vue.createApp({
	data() {
		return {
			title: {
				name: "Mini Game"
			},
			more: {
				timer: undefined,
				second: 0
			},
			cards: [
				"./images/1.png",
				"./images/2.png",
				"./images/3.png",
				"./images/4.png",
				"./images/5.png",
				"./images/6.png",
				"./images/7.png",
				"./images/8.png",
				"./images/9.png",
				"./images/10.png",
				"./images/11.png",
				"./images/12.png",
				"./images/13.png",
				"./images/14.png",
				"./images/15.png",
				"./images/16.png",
				"./images/17.png",
				"./images/18.png",
				"./images/19.png",
				"./images/20.png"
			],
			game: {
				difficulty: 8,
				playing: false,
				list: [],
				loading: false,
				loaded: 0,
				selected: [],
				bingo: 0
			},
			music: document.createElement("audio"),
			msgBox: {
				show: false,
				title: "提示",
				content: "",
				btn: {
					text: "OK",
					tip: "关闭对话框"
				}
			},
			settings: {
				show: false,
				title: "设置",
				btn: {
					text: "确定",
					tip: "关闭菜单"
				},
				useTimer: true,
				signColor: true,
				bgm: false,
				volume: 50,
				completionTip: true
			}
		}
	},
	mounted() {
		// this.music.src = "https://aod.cos.tx.xmcdn.com/group18/M01/B9/9E/wKgJJVe-4rzRg5sTAAeoBRvwXkI652.m4a"
		this.music.preload = "auto"
		this.music.src = "./music/eden_forest.mp3"
		this.music.controls = false
		this.music.loop = true
	},
	methods: {
		useMsgBox(title, content) {
			this.msgBox.show = true
			this.msgBox.title = title
			this.msgBox.content = content
		},
		about() {
			this.msgBox.show = true
			this.msgBox.title = "关于"
			this.msgBox.content = `
				【说明】你需要记住你每次翻开的卡片，尽可能地用最短的时间完成所有配对！
				<br/><br/><br/>
				历程：<br/><br/>
				【2021/09/28】初版完工<br/>
				【2021/09/29】改进底层交互逻辑，修复一些小BUG。<br/>
			`
		},
		resetGame() {
			if (this.game.loading) {
				this.useMsgBox("提示", `正在加载中，请稍后再进行操作...`)
			} else {
				this.game = {
					difficulty: 8,
					playing: false,
					list: [],
					loading: false,
					loaded: 0,
					selected: [],
					bingo: 0
				}
				clearInterval(this.more.timer)
				this.more.second = 0
				if (innerWidth < 592) {
					this.game.difficulty = 6
				} else {
					this.game.difficulty = 8
				}
				this.useMsgBox("提示", `界面已初始化！`)
			}
			this.settings.show = false
		},
		startGame() {
			if (this.game.loading) {
				this.useMsgBox("提示", `正在加载中，请稍后再进行操作...`)
				return
			}
			if (this.game.playing) {
				this.useMsgBox("提示", `游戏已经正在进行中...`)
				return
			}
			if (this.game.difficulty >= 2 && this.game.difficulty <= this.cards.length) {
				this.game.playing = true
				this.game.loading = true
				const cardsList = []
				for (let i = 0; i < this.game.difficulty; i++) {
					let img = document.createElement("img")
					img.setAttribute("src", this.cards[i])
					cardsList.push(img)
				}
				let loadedError = false
				for (let i = 0; i < cardsList.length; i++) {
					cardsList[i].onload = () => {
						this.game.loaded += 1
						if (this.game.loaded === cardsList.length + 1) {
							this.putCards()
						}
					}
					cardsList[i].onerror = () => {
						if (loadedError === false) {
							this.useMsgBox("提示", `图片载入失败，可能需要刷新重试。`)
							loadedError = true
						}
					}
				}
				setTimeout(() => {
					this.game.loaded += 1
					if (this.game.loaded === cardsList.length + 1) {
						this.putCards()
					}
				}, 2000)
			} else if (this.game.difficulty < 2 || this.game.difficulty > this.cards.length) {
				this.useMsgBox("提示", `该难度不在本游戏卡片数量的范围之内`)
			} else {
				this.useMsgBox("提示", `请输入有效数字`)
			}
		},
		putCards() {
			const cards = []
			for (let i = 0; i < this.game.difficulty; i++) {
				const card1 = {
					src: this.cards[i],
					isShow: false,
					id: i,
					bingo: false
				}
				const card2 = JSON.parse(JSON.stringify(card1))
				cards.push(card1, card2)
			}
			for (let i = cards.length - 1; i >= 0; i--) {
				let randomIndex = Math.floor(Math.random() * (i + 1))
				let itemIndex = cards[randomIndex]
				cards[randomIndex] = cards[i]
				cards[i] = itemIndex
			}
			this.game.list = cards
			this.game.loading = false
			if (this.settings.useTimer) {
				this.more.timer = setInterval(() => {
					this.more.second += 1
				}, 1000)
			}
		},
		showCard(item, i) {
			if (this.game.list[i].isShow === false) {
				this.game.list[i].isShow = true
				if (this.game.selected.length === 0) {
					this.game.selected.push(item)
				} else if (this.game.selected.length === 1) {
					if (item.id === this.game.selected[0].id) {
						this.game.selected[0].bingo = true
						item.bingo = true
						this.game.selected.splice(0, 1)
						this.completion()
						return
					} else {
						this.game.selected.push(item)
					}
				} else {
					for (let i = 0; i < this.game.selected.length; i++) {
						if (item.id === this.game.selected[i].id) {
							this.game.selected[i].bingo = true
							item.bingo = true
							this.game.selected.splice(i, 1)
							this.completion()
							return
						}
					}
					this.game.selected[0].isShow = false
					this.game.selected.shift()
					this.game.selected.push(item)
				}
			}
		},
		completion() {
			this.game.bingo += 1
			if (this.game.bingo >= this.game.difficulty) {
				clearInterval(this.more.timer)
				if (this.settings.completionTip) {
					let text = "你已完成所有配对！<br/>"
					if (this.settings.useTimer) {
						text += `<br/>用时：${this.showMinutes > 0 ? this.showMinutes + '分' : ''}${this.showSeconds}秒`
					}
					this.useMsgBox("恭喜你", text)
				}
				this.game.playing = false
			}
		},
		closeMsgBox() {
			this.msgBox = {
				show: false,
				title: "TIP",
				content: "Message Box",
				btn: {
					text: "确定",
					tip: "点击关闭消息框"
				}
			}
		},
		playBgm() {
			if (this.settings.bgm) {
				this.music.pause()
			} else {
				this.music.play()
			}
		},
		setVolume() {
			this.music.volume = this.settings.volume / 100
		}
	},
	computed: {
		showSeconds() {
			if (this.more.second >= 60) {
				return this.more.second - (parseInt(this.more.second / 60) * 60)
			} else if (this.more.second < 60 && this.more.second >= 0) {
				return this.more.second
			} else {
				return 0
			}
		},
		showMinutes() {
			return parseInt(this.more.second / 60)
		},
		settingText() {
			if (this.game.list.length === 0) {
				return "设置"
			} else {
				return `${this.showMinutes < 10 ? '0' + this.showMinutes : this.showMinutes}:${this.showSeconds < 10 ? '0' + this.showSeconds : this.showSeconds}`
			}
		}
	}
})

app.use(ElementPlus)
app.mount('#app')
